$(function(){
 /* var url = ["img/1.gif","img/2.gif","img/3.gif","img/4.gif"];
  var len = url.length;*/
  
  var $coutList = $("#coutList li a");    //按钮序列
  var len = $coutList.length;
  var timer = null;
  var index = 0;
  /*鼠标点击小按钮序列*/
  $coutList.click(function(){
	  index = $coutList.index(this);
      showImg(index);
	  }).eq(0).click();	
	/*自动播放函数*/
	$("#img").hover(function(){
		if(timer){
			clearInterval(timer);
			
			}},function(){
				timer = setInterval(function(){
					showImg(index);
					index++;
					if(index==len)
					{index=0;}
					},3000)
				}
		).trigger("mouseleave");
/*鼠标移出隐藏说明*/
$("#img").mouseleave(function(){
	$("#shadow").css("top","50px");
	})
/*鼠标移入显示说明*/		
$("#img").mouseenter(function(e){
	 var $img = $("#img");
	 var l = $img.offset().left; //图片据文档左边的距离
	 var t = $img.offset().top; //图片据文档上面的距离
	 var w = $img.outerWidth(); //图片区域的宽度
	 var h = $img.outerHeight();  //图片区域的高度
	 var imgX = l+w/4;  
	 var imgXb = l+3*(w/4);   
	 //图片左侧区域
	 var imgY = t+h/4; 
	 var imgYb = t+3*(h/4)    
	 //图片上面区域
	 var x = e.pageX;       //鼠标x坐标
	 var y = e.pageY;      //鼠标y坐标
	 if(y<imgY)
	 {
		 topShowShadow();
		 }else if(y>imgYb)
		 {
		  buttomShowShadow();
			 }
	 if(x>imgXb)
		 {
		   rightShowShadow();
		   }else if(x<imgX)
		   {
			 leftShowShadow();
			   } 
   // alert(e.pageX +" "+ e.pageY);
})
})

/*图片阴影出现函数*/

/*阴影从上面出现函数*/
function topShowShadow(){
	$("#shadow")
		  .stop()
		  .animate({
			   "top": "-" + 50 + "px" 
					})
		  .animate({
				  "top":0,
				  "left":0,
				  "width": "100%"
				  })
}

/*阴影从右面出现函数*/
function rightShowShadow(){
	 var $img = $("#img");
	var l = $img.offset().left; //图片据文档左边的距离
	var w = $img.outerWidth(); //图片区域的宽度
	$("#shadow")
		  .stop()
		  .animate({
			   "left":l+w + "px", 
					})
		  .animate({
				  "top":0,
				  "left":0,
				  "width": "100%"
				  })
}

/*阴影从底部出现函数*/
function buttomShowShadow(){
	$("#shadow")
		  .stop()
		  .animate({
				  "top":0,
				  "left":0,
				  "width": "100%"
				  })
}

/*图片阴影出现从左侧出现*/
function leftShowShadow(){
	 var $img = $("#img");
	 var w = $img.outerWidth(); //图片区域的宽度
	$("#shadow")
		  .stop()
		  .animate({
			   "left": "-" + w + "px" 
					})
		   .animate({
				  "top":0,
				  "left":0,
				  "width": "100%"
				  }) 
  }
/*图片切换函数*/
function showImg(index){
	 var $coutList = $("#coutList li a");    //按钮序列
	 
	  var $imgList = $("#imgList li a");  //图片序列
	  var $img = $imgList.find("img"); 
		$imgList.filter(":visible")
		                     .fadeOut(1000)
							 .parent()
							 .children()
							 .eq(index)
							 .stop(true,true)
							 .fadeIn(500);
		$coutList.css("backgroundPosition","0 0")
		               .eq(index).css("backgroundPosition","0 -19px");
	}
	
	